<script setup lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { uuid } from 'ele-admin-pro/es';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import type { UserItem } from '@/api/form/advanced/model';
  import { conditionalTypes, columns } from './tableFilter.data';
  import RadModal from '@/components/RadModal/index.vue';
  import { conModels } from '@/api';

  defineComponent({
    name: 'TableFilter'
  });

  const dataSource = ref<any[]>([]);
  let conModelsJson = ref<Array<conModels>>();
  defineExpose({
    conModelsJson
  });
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false
    },
    /**
     * 默认过滤参数
     */
    defaultConModels: {
      type: String,
      default: () => {
        return '';
      }
    },
    filterCols: {
      type: Array<any>,
      default: () => {
        return [];
      }
    }
  });

  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  const handleSubmit = () => {
    const results = Array<{
      FieldName: string;
      ConditionalType: string;
      FieldValue: any;
    }>();
    dataSource.value.forEach((element) => {
      if (element.FieldName && element.FieldValue) {
        results.push({
          FieldName: element.FieldName,
          ConditionalType: element.ConditionalType,
          FieldValue: element.FieldValue
        });
      }
    });
    conModelsJson.value = results;
    emit('done');
    emit('update:visible', false);
  };
  const handelUpdateVisible = (value: boolean) => {
    emit('update:visible', value);
  };
  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        if (props.defaultConModels) {
          dataSource.value.concat(JSON.parse(props.defaultConModels));
        }
      }
    }
  );

  const formatConditionalType = (value: any) => {
    const row = conditionalTypes.find((x) => x.value == value);
    return row ? row?.label : value;
  };

  const formatFieldName = (value: any) => {
    const row = props.filterCols.find((x) => x.field == value);
    return row ? row?.title : value;
  };

  /* 添加 */
  const add = () => {
    dataSource.value.push({
      key: uuid(8),
      isEdit: true,
      FieldName: props.filterCols[0].field,
      ConditionalType: '0',
      FieldValue: ''
    });
  };

  /* 编辑 */
  const edit = (_row: UserItem, index: number) => {
    dataSource.value[index].isEdit = true;
  };

  /* 完成编辑 */
  const done = (_row: UserItem, index: number) => {
    dataSource.value[index].isEdit = false;
  };

  /* 删除 */
  const remove = (_row: UserItem, index: number) => {
    dataSource.value.splice(index, 1);
  };
</script>

<template>
  <RadModal
    title="过滤"
    :visible="visible"
    @ok="handleSubmit"
    :resizable="true"
    @visible-change="handelUpdateVisible"
    ok-text="查询"
  >
    <a-button
      block
      type="dashed"
      danger
      style="margin-bottom: 10px"
      @click="add"
    >
      <template #icon>
        <plus-outlined />
      </template>
      <span>新增</span>
    </a-button>
    <a-table
      row-key="key"
      height="100%"
      :pagination="false"
      :data-source="dataSource"
      :columns="columns"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'FieldName'">
          <a-select
            v-if="record.isEdit"
            v-model:value="record.FieldName"
            placeholder="字段"
            style="width: 100%"
            :showArrow="false"
          >
            <a-select-option
              v-for="({ field, title }, _index) in filterCols?.filter(
                (x) => x.field
              )"
              :key="_index"
              :value="field"
              >{{ title }}</a-select-option
            >
          </a-select>
          <div v-else>{{ formatFieldName(record.FieldName) }}</div>
        </template>
        <template v-else-if="column.key === 'ConditionalType'">
          <a-select
            v-if="record.isEdit"
            v-model:value="record.ConditionalType"
            placeholder="比较符"
            :options="conditionalTypes"
            style="width: 100%"
            :showArrow="false"
          />
          <div v-else>{{ formatConditionalType(record.ConditionalType) }}</div>
        </template>
        <template v-if="column.key === 'FieldValue'">
          <a-input v-if="record.isEdit" v-model:value="record.FieldValue" />
          <div v-else>{{ record.FieldValue }}</div>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space>
            <a v-if="record.isEdit" @click="done(record, index)">完成</a>
            <a v-else @click="edit(record, index)">修改</a>
            <a @click="remove(record, index)">删除</a>
          </a-space>
        </template>
      </template>
    </a-table>
  </RadModal>
</template>
